<template>
	<div class="content-outside">
		<div class="content">
				<h4>作品登记申请表<span>系统将自动保存填写的信息，可在个人中心下进行修改和删除</span></h4>
				<div class="step_state">
					<div class="step step_01 clear current">
						<div class="step_info">
							<span>1</span>
							<span>作品信息</span>
						</div>
						<div class="step_border"></div>
					</div>
					<div class="step step_02 clear current">
						<div class="step_border"></div>
						<div class="step_info">
							<span>2</span>
							<span>权利状况</span>
							<span>说明</span>
						</div>
						<div class="step_border"></div>
					</div>
					<div class="step step_03 clear current">
						<div class="step_border"></div>
						<div class="step_info">
							<span>3</span>
							<span>留存样本</span>
						</div>
						<div class="step_border"></div>
					</div>
					<div class="step step_04 clear">
						<div class="step_border"></div>
						<div class="step_info">
							<span>4</span>
							<span>申请人信息</span>
						</div>
					</div>
				</div>
				<div class="hr">
					<p>留存样本</p>
				</div>
				<div class="form_box">
					<el-form :model="degree_03" :rules="degree_03_rules" ref="degree_03" label-width="150px" class="demo-degree_03">
						<div class="form_width">
							<h3 class="h3">样本信息说明：</h3>

							<el-form-item label="电子介质：" prop="sample_ele_medium">
								<el-checkbox-group v-model="degree_03.sample_ele_medium">
									<el-checkbox v-for="item in sample_ele_medium" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>

							<el-form-item label="说明：" prop="sample_ele_desc">
								<el-input type="textarea" v-model="degree_03.sample_ele_desc"></el-input>
							</el-form-item>

							<el-form-item label="电子介质数(件)：" prop="sample_media_num">
								<el-input v-model.number="degree_03.sample_media_num" style="width: 300px;"></el-input>
							</el-form-item>

							<el-form-item label="纸介质：" prop="sample_paper_medium">
								<el-checkbox-group v-model="degree_03.sample_paper_medium">
									<el-checkbox v-for="item in sample_paper_medium" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>

							<el-form-item label="说明：" prop="sample_paper_desc">
								<el-input type="textarea" v-model="degree_03.sample_paper_desc"></el-input>
							</el-form-item>

							<el-form-item label="纸介质数(张)：" prop="sample_paper_num">
								<el-input v-model.number="degree_03.sample_paper_num" style="width: 300px;"></el-input>
							</el-form-item>

							<el-form-item label="作品样本：" prop="sample_pic">
								<el-upload
								class="upload-demo"
								:action="uploadUrl"
								:data="fileInfo.zuopinyangben"
								:on-success="sampleSuccess"
								:before-upload="sampleUpload"
								:limit="1"
								:on-exceed="sampleExceed"
								:file-list="fileList.sample">
								<el-button size="small" type="primary">点击上传</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span> -->
								</el-upload>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<div class="form_next">
					<el-button type="text" @click="previousStep">返回上一步</el-button>
					<el-button type="primary" @click="updateinfoFn">下一步</el-button>
				</div>
		</div>
	</div>
</template>

<script>
	import { getStreamnum, autosubmit, submitfile, front } from '@/api';
	import { mapState, mapMutations } from 'vuex'

	export default {
		data() {
			return {
				copyright_number: null,
				// 上传地址
				uploadUrl: submitfile,
				imageUrl: '',
				fileInfo: {
					zuopinyangben: {
						type: 'all',
						folder: 'zuopinyangben',
					}
				},
				fileList: {
					sample: [], // 上传附件
				},

				sample_ele_medium: [{
					value: 1,
					label: '只读光盘(CD-ROM)',
				},{
					value: 2,
					label: '软磁盘(FD)',
				},{
					value: 3,
					label: '交互式磁盘(CD-I)',
				},{
					value: 4,
					label: '照版光盘(photo-cd)',
				},{
					value: 5,
					label: '集成电路卡(IC Card)',
				},{
					value: 6,
					label: '其他',
				}],

				sample_paper_medium: [{
					value: 1,
					label: '印刷品',
				},{
					value: 2,
					label: '打印纸(A4纸)',
				},{
					value: 3,
					label: '复印纸(A4纸)',
				},{
					value: 4,
					label: '照片(6-12寸)',
				},{
					value: 5,
					label: '其他',
				}],

				degree_03: {
					sample_ele_medium: [], // 电子介质
					sample_ele_desc: '', // 说明
					sample_media_num: '', // 电子介质数
					sample_paper_medium: [], // 纸介质
					sample_paper_desc: '', // 说明
					sample_paper_num: '', // 纸介质数
					sample_pic : '', // 作品样本
				},

				degree_03_rules: {
					sample_media_num: [{ type: 'number', message: '必须为数字值'}],
					sample_pic: [{ required: true, message: '这是必填项或必选项' }],
					sample_paper_num: [{ type: 'number', message: '必须为数字值'}],
				},

			}
		},
		computed: {
			...mapState([
				'croUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			// 上传样本
			sampleSuccess(res, file) {
				if(res.data){
					this.degree_03.sample_pic = res.data;
				}else{
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},
			sampleUpload(file) {
			},
			sampleExceed(files, fileList) {
				this.$message.warning(`只能上传1个文件`);
			},

			// 获取已提交数据
			frontFn(){
				let para={
					copyright_number: this.copyright_number,
					user_id: this.croUser.user_id,
				}
				front(para).then(data => {
					let res = data.data;
					for(let i in res){
						this.degree_03[i] = res[i];
					}
					// this.degree_03 = data.data;
				});
			},
			// 上一步
			previousStep(){
				this.$router.push({
					path: 'copyRightStep02',
					query: {
						copyright_number: this.copyright_number,
					}
				});
			},
			// 总提交
			autosubmitFn() {
				this.$refs.degree_03.validate((valid) => {
					if (valid) {
						let para = Object.assign({}, this.degree_03);
						para.degree = 3;
						para.user_id = this.croUser.user_id;
						para.copyright_number = this.copyright_number;
						// console.log(para);

						autosubmit(para).then(res => {
							if(res.data){
								this.$router.push({ path: 'copyRightStep04', query: {copyright_number: this.copyright_number }});
								// this.$refs['editOwner'].resetFields();
								// this.ownerlistFn();
							}else if(res.tologin) {
								this.OUT_LOGIN();
								this.$router.push('/login');
							}else {
								this.$message.error(res.msg);
							}
						});
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
		mounted() {
			// this.getStreamnumFn();
			this.copyright_number = this.$route.query.copyright_number;
			this.frontFn();
		}
	}
</script>
<style lang="scss" scoped>
	.content-outside {
		width: 100%;
		background: #f2f2f2;
		padding: 15px 0;
	}
	.content {
		width: 1200px;
		margin: 0px auto;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;
		font-size: 14px;
	}
	.content h4{
		font-size: 16px;
		// font-weight: normal;

	}
	.content h4>span {
		font-size: 12px;
		font-weight: normal;
		padding-left: 25px;
	}
	/* hr */
	.content .hr{
		position: relative;
		top: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #c6c6c6;
		margin-top: 20px;
		font-size: 17px;
	}
	.content .hr>p {
		position: relative;
		top: -17px;
		left: 0;
		width: 300px;
		height: 40px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #c6c6c6;
		border-radius: 3px;
		box-sizing: border-box;
		margin: 0 auto;
		background: #fff;
	}

	/* step 提交后 #37629d 填写前 #c6c6c6 */
	.step_state {
		height: 90px;
		padding: 35px 0 55px 100px;
	}
	.step {
		float: left;
	}
	.step_border {
		display: inline-block;
		background: #c6c6c6;
		width: 90px;
		height: 1px;
		vertical-align: top;
		margin: 0;
		margin-top:45px;
	}
	.step_info {
		display: inline-block;
		width: 90px;
		height:90px;
		border: 1px solid #c6c6c6;
		border-radius: 50%;
		font-size: 14px;
		color: #999;
		box-sizing: border-box;
		padding-top: 15px;
		margin: 0 15px;
	}
	.step_info span {
		display: block;
		line-height: 22px;
		text-align: center;
	}

	.step.current .step_border {
		background: #37629d;
	}
	.step.current .step_info {
		border: 1px solid #37629d;
		color: #37629d;
	}
	.step_form_info{
		margin-top: 30px;
		background: #f2f2f2;
		padding:0 30px 30px 30px;
	}

	.form_box {
		padding: 15px 15px 30px 15px;
		background: #f2f2f2;
	}
	.form_box .h3 {
		font-size: 16px;
		font-weight: normal;
		padding: 15px 0 25px 0;
	}
	.el-checkbox-group .el-checkbox{
		padding: 0px 15px 0px 0;
	}
	.el-radio-group .el-radio {
		padding-right: 15px;
		line-height: 36px;
	}
	.el-checkbox+.el-checkbox,
	.el-radio+.el-radio {
		margin: 0;
	}
	.ff4949 {
		color:#ff4949;
		margin-right: 4px;
	}
	.form_next {
		text-align: center;
		padding: 25px 0;
	}

	.form_width {
		width: 1000px;
		margin-left: 80px;
	}
</style>
